<!-- 省市区 -->
<template>
  <div style="display: flex">
    <a-select
      placeholder="省"
      v-model="area.provinceId"
      @change="changeProvince"
      :disabled="disabled"
      style="width: 150px"
    >
      <a-select-option :value="item.code" v-for="(item, index) in provinceArr" :key="index"
        >{{ item.name }}
      </a-select-option>
    </a-select>
    <a-select
      placeholder="市"
      v-model="area.cityId"
      @change="changeCity"
      :disabled="disabled"
      style="margin-left: 10px; width: 150px"
    >
      <a-select-option :value="item.code" v-for="(item, idx) in cityArr" :key="idx">{{ item.name }} </a-select-option>
    </a-select>
    <a-select
      placeholder="区"
      v-model="area.areaId"
      :disabled="disabled"
      @change="changeArea"
      style="margin-left: 10px; width: 150px"
    >
      <a-select-option :value="item.code" v-for="(item, index) in areaArr" :key="index"
        >{{ item.name }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
import { YbAddress } from '@/api/finance/finance'
export default {
  props: ['area', 'disabled'],
  components: {},
  data() {
    return {
      provinceArr: [],
      cityArr: [],
      areaArr: [],
    }
  },
  computed: {},
  watch: {
    area(val) {
      if (val.provinceId && !this.cityArr.length) {
        this.getAddressData(`city/${val.provinceId}`, 'city')
      }
      if (val.cityId && !this.areaArr.length) {
        this.getAddressData(`district/${val.cityId}`, 'area')
      }
    },
  },
  methods: {
    changeProvince(value) {
      // this.form.cityId = undefined
      // this.form.areaId = undefined
      this.getAddressData(`city/${value}`, 'city')
    },
    changeCity(value) {
      // this.form.areaId = undefined
      this.getAddressData(`district/${value}`, 'area')
    },
    changeArea(val) {
      // console.log('val---->', val)
      console.log('area---->', this.area)
      this.$emit('getArea', this.area)
    },
    getAddressData(value, type) {
      return YbAddress(value).then((res) => {
        switch (type) {
          case 'province':
            this.provinceArr = JSON.parse(JSON.stringify(res.data))
            break
          case 'city':
            this.cityArr = JSON.parse(JSON.stringify(res.data))
            break
          case 'area':
            this.areaArr = JSON.parse(JSON.stringify(res.data))
            break
        }
      })
    },
  },
  created() {
    this.getAddressData('province', 'province')
  },
  mounted() {},
}
</script>
<style scoped>
</style>